<template>
  <FPage 
  navbar 
  title="EAP登录-拾光集" 
  navBarColor="transparent"
  :navBarStyle="{background:'transparent'}"
  class="login">
    <view class="login-bg">
      <image mode="aspectFill" src="../../static/img/login/logo_bgicon.png" class="bg1"></image>
      <image mode="aspectFill" src="../../static/img/login/logo_bgicon.png" class="bg2"></image>
    </view>
    <view class="login-content">
      <view class="pb20">
        <view class="f60">欢迎登录</view>
        <view class="f32 mt15">拾光集EAP平台（Beta）</view>
      </view>
      <view class="pb50 tc pt60">
        <image src="https://img.wujiyunhe.cn/logo.png" class="logo"></image>
      </view>
      <form @submit="onSubmit" style="width: 100%;">
        <view class="field">
          <view class="field__wrap">
            <view class="field__left_icon">
              <span class="iconfont icon-user gray"></span> 
            </view>
            <input
              class="field__input"
              name="input"
              type="number"
              maxlength="11"
              placeholder="手机号"
              :value="form.mobile"
              @input="handleInputChange('mobile', $event);handleMobileBlur()"
              @blur="handleMobileBlur"
              @confirm="handleConfirm"
            />
            <image
              button
              v-if="form.mobile"
              class="field__icon"
              :src="require('../../static/img/login/close.png')"
              @tap="handleCloseClick('mobile')"
            ></image>
          </view>
          <view class="field__error" v-if="errorMessage.mobile">{{errorMessage.mobile}}</view>
        </view>

        <view class="field">
          <view class="field__wrap">
            <view class="field__left_icon">
              <span class="iconfont icon-password gray"></span> 
            </view>
            <input
              class="field__input"
              name="input"
              maxlength="18"
              :type="eye ? 'text' : 'password'"
              placeholder="密码"
              :value="form.password"
              :confirm-hold="false"
              @input="handleInputChange('password', $event);handlePasswordBlur()"
              @blur="handlePasswordBlur"
              @confirm="handleConfirm"
            />
            <image
              v-if="form.password"
              @click="eye = !eye"
              class="field__icon field__eye"
              :src="eyeIcon"
            ></image>
          </view>
          <view class="field__error" v-if="errorMessage.password">{{errorMessage.password}}</view>
        </view>

        <button class="btn" form-type="submit" button>
          <text>登录</text>
          <span class="ml10 iconfont icon-right"></span> 
        </button>

      </form>
    </view>

  </FPage>
</template>
<script>
import { mapState } from 'vuex'
import form from '@/mixin/form'
import Protocol from './components/Protocol'
// import { md5, isMobile, isPassword } from '@/utils'

export default {
  mixins: [form],
  components: {
    Protocol
  },
  data () {
    return {
  	  curl:'',
      eye: false,
      checked: true,
      form: {
        mobile: '',
        password: '',
        loginType: 1
      },

      errorMessage: {
        mobile: '',
        password: ''
      }
    }
  },
  computed:{
	  // ...mapState('user', ['lastLogin'])
    eyeIcon(){
      return this.eye ? require('../../static/img/login/eye_close.png') : require('../../static/img/login/eye_open.png')
    }
  },
  onLoad(option) {
  	this.curl = option.curl
  },
  onReady() {
  },
  created(){
	  // this.form.mobile = this.lastLogin
  },
  methods: {
    onChange (checked) {
      this.checked = checked
    },

    onSubmit () {
      const mobile = this.handleMobileBlur()
      const password = this.handlePasswordBlur()

      if (mobile && password) {
        const data = { loginname: this.form.mobile, pwd: this.form.password}
        this.$store.dispatch('user/login', data).then((e) => {
          console.log(139,e)
          if(this.curl && !this.curl.includes('pages/tabBar')){
            uni.redirectTo({
              url: `/${this.curl}`
            })
          }else{
            uni.switchTab({
              url: this.curl?`/${this.curl}`:'/pages/tabBar/home/index'
            })
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  background-color: #fff;
}
.logo{
  width: 200rpx;
  height: 200rpx;
  border-radius: 100rpx;
}

.login-content {
  height: 100%;
  // padding-top: calc(600rpx - var(--status-bar-height));
  padding-top: 50rpx;
  padding-left: 74rpx;
  padding-right: 74rpx;
  position: relative;
}

.field {
  // display: flex;
  margin-bottom: 30rpx;
  &__label {
    color: #663C1A;
    font-size: 40rpx;
    line-height: 90rpx;
    max-width: 250rpx;
  }
  &__input {
    background: #f0f0f0;
    border-radius: 46rpx;
    height: 90rpx;
    line-height: 90rpx;
    color: #333;
    padding: 0 24rpx 0 100rpx;
  }
  &__wrap {
	  flex: 1;
    position: relative;
  }
  &__icon{
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20rpx;
    z-index: 10;
    &::before {
      z-index: 100;
      content: '';
      position: absolute;
      top: -10rpx;
      left: -10rpx;
      right: -10rpx;
      bottom: -10rpx;
    }
  }
  &__left_icon{
    width: 80rpx;
    height: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &__eye {
    width: 40rpx;
    height: 32rpx;
  }
  &__error {
    color: #ff644a;
    font-size: 30rpx;
    margin-left: 40rpx;
    margin-top:10rpx;
    // position: absolute;
    // left: 20rpx;
    // top: 95rpx;
  }
}

.btn {
  border-radius: 50rpx 50rpx;
  text-align: center;
  color: #FFF;
  font-size: 34rpx;
  margin: 0 auto;
  margin-top: 70rpx;
  background: linear-gradient(90deg, #FFA03B, #FF834C);;
  // background: url('../../static/img/login/login.png') no-repeat left top / 100% 100%;
}
.btn:after {
  border: none;
}

.desc {
  display: flex;
  justify-content: space-between;
  color: #663C1A;
  font-size: 34rpx;
  margin: 30rpx 80rpx 0;
}
.login-bg{
  position: fixed;
  background-color: #fff;
  height: calc(100vh);
  width: 100%;
  top: 0;
  left: 0;
  .bg1{
    position: absolute;
    top: -350rpx;
    left: -150rpx;
    width: 550rpx;
    height: 550rpx;
    opacity: .5;
  }
  .bg2{
    position: absolute;
    bottom: -330rpx;
    right: -330rpx;
    width: 550rpx;
    height: 550rpx;
    opacity: .5;
  }
}
</style>
